<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <label class="el-form-item-label">月</label>
      <span>
        <el-date-picker
          v-model="query.month"
          class="filter-item"
          type="month"
          placeholder="选择月"
          value-format="yyyy-MM-31"
          @change="changeDate"
        />
      </span>
      <label class="el-form-item-label">类型</label>
      <span>
        <el-select v-model="query.type" clearable size="small" placeholder="请选择类型" class="filter-item" style="width: 190px" @change="crud.toQuery">
          <el-option v-for="item in dict.evaluationdtl_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </span>
      <!-- <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="doList">搜索</el-button>  -->
      <el-button type="defalut" icon="el-icon-download" :loading="downloadLoading" style="float: right;" @click="doExport">导出</el-button>
      <!-- <el-button class="filter-item" size="mini" type="warning" @click="goview">预览</el-button> -->
    </div>
    <!--表格渲染-->
    <div
      data-v-eba2317e=""
      class="el-table el-table--fit el-table--border el-table--group el-table--enable-row-hover el-table--enable-row-transition el-table--small"
      style="width: 100%"
    >
      <div class="el-table__header-wrapper">
        <table
          cellspacing="0"
          cellpadding="0"
          border="0"
          class="el-table__header"
          width="100%"
        >
          <colgroup>
            <col name="el-table_14_column_109">
            <col name="el-table_14_column_110" width="198">
            <col name="el-table_14_column_111_column_112_column_113" width="198">
            <!-- <col name="el-table_14_column_110"  width="198"/> -->
          </colgroup>
          <thead class="is-group has-gutter">
            <tr class="">
              <th class="el-table_14_column_109 is-leaf el-table__cell"> <div class="cell">问题类型</div> </th>
              <th class="el-table_14_column_110 is-leaf el-table__cell"> <div class="cell">涉及点位数量</div> </th>
              <th class="el-table_14_column_110 is-leaf el-table__cell"> <div class="cell">问题条数</div> </th>
              <!-- <th class="el-table_14_column_110 is-leaf el-table__cell" > <div class="cell">操作</div> </th>  -->
            </tr>
          </thead>
        </table>
      </div>
      <div class="el-table__body-wrapper is-scrolling-none">
        <table
          cellspacing="0"
          cellpadding="0"
          border="0"
          class="el-table__body"
          width="100%"
        >
          <colgroup>
            <col name="el-table_14_column_109">
            <col name="el-table_14_column_110" width="198">
            <col name="el-table_14_column_111_column_112_column_113" width="198">
            <!-- <col name="el-table_14_column_110"  width="198"/> -->
          </colgroup>
          <tbody>
            <tr v-for="(item,index) in crud.data" :key="index" class="el-table__row">

              <td
                colspan="1"
                class="el-table_14_column_109 el-table__cell"
              >
                <div class="cell "><div>{{ item.name }}</div></div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_110 el-table__cell"
              >
                <div class="cell ">{{ item.num }}</div>
              </td>
              <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_114 el-table__cell"
              >
                <div class="cell ">{{ item.pnum }}</div>
              </td>
              <!-- <td
                rowspan="1"
                colspan="1"
                class="el-table_14_column_111_column_112_column_114 el-table__cell"
              >
                <div class="cell " >
                  <el-button
                    class="filter-item"
                    size="mini"
                    type="warning"
                    @click="goview"
                  >预览</el-button></div>
              </td>   -->
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import crudproblemtmlp from '@/api/system/problemtmlp'
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import { parseTime } from '@/utils/index'
import { ExportBriefDataDocx } from '@/utils/exportWordImage'
export default {
  name: 'GeneratorIndex',
  components: { crudOperation, rrOperation },
  mixins: [presenter(), header(), crud()],
  dicts: ['evaluationdtl_type'],
  cruds() {
    return CRUD({
      title: '问题分析',
      url: '/api/eventReport/getProblemAnalysis',
      query: {
        month: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-31',
        beginDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-01',
        endDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-31',
        type: '1',
        odata: {}
      }
      // page: {}
    })
  },
  data() {
    return {
      syncLoading: false,
      list: [],
      downloadLoading: false,
      itemData: [],
      host: process.env.VUE_APP_BASE_API
    }
  },
  created() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: false
    }
    // this.doList()
    this.doInit()
  },
  methods: {
    parseTime,
    changeDate(val) {
      this.query.beginDate = this.query.month.slice(0, 7) + '-01'
      this.query.endDate = this.query.month.slice(0, 7) + '-31'
      // this.doList()
      this.crud.refresh()
      // this.doInit()
    },
    // doList(){
    //   crudUnitInspectorateSituation.list(this.query).then((res)=>{
    //     this.list =res
    //   })
    // },
    doExport() {
      // 设置模板变量的值
      const imgSize = {
        imgurl: [315, 215]// 控制导出的word图片大小
      }
      ExportBriefDataDocx(`${'/problemtmpl'}.docx`, this.odata, '问题分析.docx', imgSize)
    },
    doInit() {
      crudproblemtmlp.exportProblemAnalysisData({ ...this.query }).then((res) => {
        this.odata = res
      })
    },
    getBase64Sync(imgUrl) {
      return new Promise(function(resolve, reject) {
        // 一定要设置为let，不然图片不显示
        const image = new Image()
        // 图片地址
        image.src = imgUrl
        // 解决跨域问题
        image.setAttribute('crossOrigin', '*') // 支持跨域图片
        // image.onload为异步加载
        image.onload = function() {
          const canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          const context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          // 图片后缀名
          const ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase()
          // 图片质量
          const quality = 0.8
          // 转成base64
          const dataurl = canvas.toDataURL('image/' + ext, quality)
          // 返回
          resolve(dataurl)
        }
      })
    },
    base64DataURLToArrayBuffer(dataURL) {
      debugger
      const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/
      if (!base64Regex.test(dataURL)) {
        return false
      }
      const stringBase64 = dataURL.replace(base64Regex, '')
      let binaryString
      if (typeof window !== 'undefined') {
        binaryString = window.atob(stringBase64)
      } else {
        binaryString = new Buffer(stringBase64, 'base64').toString('binary')
      }
      const len = binaryString.length
      const bytes = new Uint8Array(len)
      for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i)
        bytes[i] = ascii
      }
      return bytes.buffer
    }
  }
}
</script>

<style scoped>
</style>
